import { useState, useEffect } from 'react'
// 以 use 开头的 都叫 react hooks
import './App.css'
import { Routes, Route, Link } from 'react-router-dom'

const Demo = () => {
  useEffect(() => {
    console.log('挂载完成')
    return () => {
      console.log('取消挂载')
    }
  })
  return (
    <div>
      Demo
    </div>
  )
}

function App() {

  const [isShow, setIsShow] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setIsShow(false)
    }, 2000)
  })
  const Index = () => {
    useEffect(() => {
      console.log('进入Index')
      return (() => {
        console.log('离开Index')
      })
    })
    return (
      <div>
        Index
      </div>
    )
  }
  const List = () => {
    return (
      <div>
        List
      </div>
    )
  }
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`App组件 ${count}`)
  })
  return (
    <div className="container">
      <div>
        <p>You clicked {count} times</p>
      </div>
      <button onClick={() => setCount(count + 1)}>click me</button>
      {isShow && < Demo />}
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/list">列表</Link>
        </li>
      </ul>
      <Routes>
        <Route path='/' element={<Index />} />
        <Route path='/list' element={<List />} />
      </Routes>
    </div>
  )
}

export default App
